<template>
  <div class="txlist bg-gray">
    <!-- <div class="bg-white"> -->
      <div class="w1200">
        <!-- <BackBar :backTitle="$t('nav.wallet')"></BackBar> -->
        <h3 class="title111">{{$t('home.home2')}}</h3>
      </div>
    <!-- </div> -->

    <div class="w1200">
      <div v-loading="txListDataLoading" class="mb_100">
        <div class="filter">
          <el-select v-model="assetsValue" @change="channgeAsesets" v-show="false">
            <el-option v-for="item in assetsOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-select :value="$t('type.'+typeValue)" @change="channgeType">
            <el-option v-for="item in typeOptions" :key="item.value" :label="$t('type.'+item.value)" :value="item.value"></el-option>
          </el-select>
          <el-select :value="$t('budgetType.'+inAndOutValue)" @change="channgeInAndOut" :disabled="types !==2" v-if="false">
            <el-option v-for="item in inAndOutOptions" :key="item.value" :label="$t('budgetType.'+item.value)" :value="item.value"></el-option>
          </el-select>
          <el-switch v-model="isHide" active-text="" :inactive-text="$t('public.hideReward')" :width="35" @change="changeHide" v-show="false"></el-switch>
        </div>
        <el-table :data="txListData" stripe border>
          <el-table-column prop="symbol" :label="$t('tab.tab0')" align="center" width="100">
            ATR
          </el-table-column>
          <el-table-column :label="$t('tab.tab1')" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope"><span>{{ scope.row.contractType }}</span></template>
          </el-table-column>
          <el-table-column label="TxID" align="center">
            <template slot-scope="scope">
              <!-- <router-link class="click" tag="a" :to="{name:'transferInfo',query:{hash:scope.row.txHash}}"> -->
              <router-link class="click" tag="a" to="">
                {{ scope.row.txId }}
              </router-link>
              <!--<span class="click " @click="toUrl('transferInfo',scope.row.txHash)">{{scope.row.txid}}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="createTime" :label="$t('tab.tab5')" align="center">
            <template slot-scope="scope">
                {{ scope.row.timestamp }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('tab.tab6')" align="center">
            <template slot-scope="scope">
              <!-- <span :class="scope.row.fromAddress == addressInfo.address ? 'fred':'fCN'">
                {{scope.row.amount}}
              </span> -->
              <span v-if="scope.row.contractType == 'DelegateRewardContract'" class="fCN">+{{scope.row.amount}}</span>
              <span v-else-if="scope.row.fromAddress == addressInfo.address" class="fred">-{{scope.row.amount}}</span>
              <span v-else class="fCN">+{{scope.row.amount}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('tab.tab10')" align="center" width="120">
            <template slot-scope="scope"><span>{{ scope.row.result }}</span></template>
          </el-table-column>
        </el-table>
        <div class="pages">
          <div class="page-total">
            {{pageIndex-1 === 0 ? 1 : (pageIndex-1) * pageSize}}-{{pageIndex * pageSize}}
            of {{pageTotal}}
          </div>
          <el-pagination v-show="pageTotal > pageSize" @current-change="txListPages" class="fr"
                         :current-page="pageIndex"
                         :page-size="pageSize"
                         background
                         layout=" prev, pager, next, jumper"
                         :total="pageTotal">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from 'axios'
  import {timesDecimals, getLocalTime, superLong, addressInfo} from '@/api/util'
  // import BackBar from '@/components/BackBar'

  export default {
    data() {
      return {
        assetsOptions: [
          {value: '0', label: '0'},
          {value: '1', label: '1'},
          {value: '2', label: '2'}
        ], //资产类型
        assetsValue: "0",
        typeOptions: [
          {value: '0', label: '0'},
          {value: '2', label: '2'},
          // {value: '3', label: '3'},
          // {value: '4', label: '4'},
          {value: '5', label: '5'},
          {value: '6', label: '6'},
          // {value: '7', label: '7'},
          // {value: '8', label: '8'},
          // {value: '9', label: '9'},
          // {value: '10', label: '10'},
          // {value: '11', label: '11'},
          // {value: '12', label: '12'},
          // {value: '13', label: '13'},
          // {value: '14', label: '14'},
          // {value: '15', label: '15'},
          // {value: '16', label: '16'},
          // {value: '17', label: '17'},
          // {value: '18', label: '18'},
          // {value: '19', label: '19'},
          // {value: '20', label: '20'},
          // {value: '21', label: '21'},
          // {value: '22', label: '22'},
          // {value: '23', label: '23'},
          // {value: '24', label: '24'},
          // {value: '25', label: '25'},
        ], //交易类型
        typeValue: '0',
        inAndOutOptions: [
          {value: '0', label: '0'},
          {value: '1', label: '1'},
          {value: '2', label: '2'},
        ], //收入/支出
        inAndOutValue: '0',
        // txListDataLoading: true,//资产加载动画
        txListDataLoading: false,//资产加载动画
        txListData: [],//交易数据
        pageIndex: 1, //页码
        pageSize: 10, //每页条数
        pageTotal: 0,//总页数
        addressInfo: [], //账户信息
        types: 0,//类型
        isHide: true,//隐藏共识奖励
        txListSetInterval: null,//定时器
      };
    },
    created() {
      this.addressInfo = addressInfo(1);
      setInterval(() => {
        this.addressInfo = addressInfo(1);
      }, 500);
    },
    mounted() {
      this.getTxlistByAddress(this.addressInfo.address);
      // setTimeout(() => {
      //   this.getTxlistByAddress(this.addressInfo.address);
      // }, 600);
      // //10秒循环一次数据
      // // console.log(this.addressInfo)
      // this.txListSetInterval = setInterval(() => {
      //   this.getTxlistByAddress(this.addressInfo.address);
      // }, 10000);
    },
    beforeRouteLeave(to, from, next) {
      if (to.name === 'transferInfo') {
        from.meta.keepAlive = true
      } else {
        from.meta.keepAlive = false
      }
      next();
    },
    destroyed() { //离开当前页面后执行
      clearInterval(this.txListSetInterval);
    },
    watch: {
      addressInfo(val, old) {
        if (val.address !== old.address && old.address) {
          this.getTxlistByAddress(this.addressInfo.address);
        }
      }
    },
    // components: {
    //   BackBar
    // },
    methods: {

      /**
       * 根据地址获取交易列表
       * @param address_now_select 地址
       **/
      getTxlistByAddress(address_now_select, pagenem, changeType) {
        pagenem = pagenem || 1;   //默认1
        changeType = changeType || '';   //默认1
        axios.get(''+this.$listApi+'/transactions?address='+address_now_select+'&limit='+this.pageSize+'&start='+pagenem+'&contractType='+changeType, 'getAccountTxs')
          .then((response) => {
            // console.log('交易记录===',response);
            if (response.data != [] || response.data) {
              for (let item of response.data.data) {
                item.timestamp = moment(getLocalTime(item.timeStamp)).format('YYYY-MM-DD HH:mm:ss');
                item.txId = superLong(item.transactionId, 8);
                item.amount = item.assetAmount / 1000000
              }
              this.txListData = response.data.data;
              this.pageTotal = response.data.total;
              this.txListDataLoading = false;
            }
          })
          .catch((error) => {
            console.log("getAccountTxs:" + error);
            this.txListDataLoading = false;
          })
      },

      /**
       * 资产下拉框选择
       * * @param e
       **/
      channgeAsesets(e) {
        console.log(e)
      },

      /**
       * 交易类型下拉框选择
       * * @param e
       **/
      channgeType(e) {
        this.types = Number(e);
        this.typeValue = Number(e);
        if (e == 2) {
          this.getTxlistByAddress(this.addressInfo.address, '','TransferContract');
        } else if (e == 6) {
          this.getTxlistByAddress(this.addressInfo.address, '','UnDelegateContract');
        } else if (e == 5) {
          this.getTxlistByAddress(this.addressInfo.address, '','DelegateContract');
        } else {
          this.getTxlistByAddress(this.addressInfo.address);
        }        
      },

      /**
       * 收支类型下拉框选择
       * * @param e
       **/
      channgeInAndOut(e) {
        this.inAndOutValue = Number(e);
      },

      /**
       * 隐藏共识奖励
       * @param e
       **/
      changeHide(e) {
        this.isHide = e;
        this.pageIndex = 1;
        this.getTxlistByAddress(this.addressInfo.address);
      },

      /**
       * 交易列表分页功能
       * @param val
       **/
      txListPages(val) {
        this.pageIndex = val;
        this.txListDataLoading = true;
        this.getTxlistByAddress(this.addressInfo.address, this.pageIndex);
      },

      /**
       * 连接跳转
       * @param name
       * @param params
       */
      toUrl(name, params) {
        let newQuery = {hash: params};
        this.$router.push({
          name: name,
          query: newQuery
        })
      },

    }
  }
</script>

<style lang="less">
  .txlist {
    .title111{
      background-color: #fff0!important;
      height: auto!important;
      margin: 20px 0;
      text-align: center;
    }
  }
</style>
